<template>
    <view class="st-uni-comment">
        <!-- 资料条 -->
        <view class="toolbar">
            <view class="star" :class="starClass" :style="starStyle" @tap="()=>{$emit('star')}">
                <text class="iconfont icon-dianzan" :class="{'is-stared': isStared}"></text>
            </view>
            <view class="comment" :class="commentClass" :style="commentStyle" @tap="()=>{$emit('comment')}">
                <text class="iconfont icon-pinglun"></text>
            </view>
        </view>
        <!-- 赞／评论区 -->
        <view class="post-footer" v-if="starNicknames.length > 0 || comments.length > 0">
            <view class="footer_content">
                <text class="iconfont icon-dianzan" :class="{'is-stared': isStared}"></text>
                <text class="nickname" v-for="(nickname,index_star) in starNicknames" :key="index_star">{{nickname + (index_star == starNicknames.length - 1? '': ',')}}</text>
            </view>
            <view class="footer_content" v-for="(comment,comment_index) in comments" :key="comment_index" @tap="()=>{$emit('reply',comment)}">
                <text class="comment-nickname">{{comment.nickname}}: <text class="comment-content">{{comment.content}}</text></text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "StUniComment",
        props: {
            starClass: String,
            commentClass: String,
            starStyle: String,
            commentStyle: String,
            isStared:{
                type: Boolean,
                default: false
            },
            // 点赞昵称
            starNicknames:{
                type: Array,
                default: function () {
                    return []
                }
            },
            // 评论
            comments:{
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        data() {
            return {}
        },
        methods: {}
    }
</script>

<style scoped>
    .st-uni-comment .toolbar{
        position: relative;
    }

.st-uni-comment .star {
    width: auto;
    height: auto;
    position: absolute;
    right: 60upx;
    display: flex;
    align-items: center;
    z-index: 1;
}
    .iconfont.icon-dianzan.is-stared{
        color: #387FF4;
    }
.st-uni-comment .comment {
    width: auto;
    height: auto;
    position: absolute;
    right: 10upx;
    display: flex;
    align-items: center;
    z-index: 1;
}

.post-footer{
    margin-top: 30upx;
    background-color: #f3f3f5;
    width: 100%;
}

.st-uni-comment .footer_content {
    padding-left: 10upx;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.st-uni-comment .footer_content .nickname {
    color: #36648B;
    font-size: 24upx
}

.st-uni-comment .footer_content .comment-nickname {
    color: #36648B;
    font-size: 24upx
}

.st-uni-comment .footer_content .comment-content {
    color: #000000;
    font-size: 24upx
}
</style>